<template>
  <div class="app-container">
    <div class="reservation-container">
      <div class="reservation-header">
        <h1>服务预约</h1>
        <p>简单几步，轻松预约专业家政服务</p>
      </div>

      <el-card class="reservation-card">
        <el-steps :active="activeStep" finish-status="success" align-center>
          <el-step title="选择服务"></el-step>
          <el-step title="填写信息"></el-step>
          <el-step title="确认预约"></el-step>
          <el-step title="预约成功"></el-step>
        </el-steps>

        <!-- 步骤1：选择服务 -->
        <div v-if="activeStep === 0" class="step-content">
          <h2 class="step-title">选择服务类型</h2>
          <el-form :model="reservationForm" label-width="100px">
            <el-form-item label="服务类别">
              <el-select v-model="reservationForm.serviceCategory" placeholder="请选择服务类别" style="width: 100%">
                <el-option v-for="category in serviceCategories" :key="category.value" :label="category.label" :value="category.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="服务项目">
              <el-select v-model="reservationForm.serviceType" placeholder="请选择服务项目" style="width: 100%">
                <el-option v-for="type in filteredServiceTypes" :key="type.value" :label="type.label" :value="type.value"></el-option>
              </el-select>
            </el-form-item>

            <div v-if="selectedService" class="selected-service">
              <div class="service-info">
                <h3>{{ selectedService.label }}</h3>
                <p>{{ selectedService.description }}</p>
                <div class="service-features">
                  <div v-for="(feature, index) in selectedService.features" :key="index" class="feature-item">
                    <i class="el-icon-check"></i>
                    <span>{{ feature }}</span>
                  </div>
                </div>
                <div class="service-price">
                  <span class="price">¥{{ selectedService.price }}</span>
                  <span class="unit">{{ selectedService.unit }}</span>
                </div>
              </div>
            </div>

            <el-form-item label="服务日期">
              <el-date-picker v-model="reservationForm.date" type="date" placeholder="选择日期" style="width: 100%"
                              :picker-options="{disabledDate: disabledDate}"></el-date-picker>
            </el-form-item>

            <el-form-item label="服务时间">
              <el-time-select v-model="reservationForm.time" placeholder="选择时间" style="width: 100%"
                              :picker-options="{start: '08:00', step: '00:30', end: '20:00'}"></el-time-select>
            </el-form-item>

            <el-form-item v-if="needsDuration" label="服务时长">
              <el-select v-model="reservationForm.duration" placeholder="请选择服务时长" style="width: 100%">
                <el-option label="2小时" value="2"></el-option>
                <el-option label="3小时" value="3"></el-option>
                <el-option label="4小时" value="4"></el-option>
                <el-option label="6小时" value="6"></el-option>
                <el-option label="8小时" value="8"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="nextStep" :disabled="!canProceedToStep1">下一步</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤2：填写信息 -->
        <div v-if="activeStep === 1" class="step-content">
          <h2 class="step-title">填写联系信息</h2>
          <el-form :model="reservationForm" :rules="rules" ref="userInfoForm" label-width="100px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="reservationForm.name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>

            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="reservationForm.phone" placeholder="请输入您的手机号码"></el-input>
            </el-form-item>

            <el-form-item label="服务地址" prop="address">
              <el-input v-model="reservationForm.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>

            <el-form-item label="服务备注">
              <el-input type="textarea" v-model="reservationForm.notes" placeholder="请输入服务要求或特殊需求" rows="4"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button @click="activeStep = 0">上一步</el-button>
              <el-button type="primary" @click="submitUserInfo">下一步</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤3：确认预约 -->
        <div v-if="activeStep === 2" class="step-content">
          <h2 class="step-title">确认预约信息</h2>
          <div class="confirmation-info">
            <el-card>
              <div slot="header">
                <span>服务信息</span>
              </div>
              <div class="info-row">
                <span class="label">服务类别：</span>
                <span class="value">{{ getServiceCategoryLabel }}</span>
              </div>
              <div class="info-row">
                <span class="label">服务项目：</span>
                <span class="value">{{ getServiceTypeLabel }}</span>
              </div>
              <div class="info-row">
                <span class="label">服务时间：</span>
                <span class="value">{{ formatDate(reservationForm.date) }} {{ reservationForm.time }}</span>
              </div>
              <div v-if="needsDuration" class="info-row">
                <span class="label">服务时长：</span>
                <span class="value">{{ reservationForm.duration }}小时</span>
              </div>
              <div class="info-row">
                <span class="label">预计费用：</span>
                <span class="value price">¥{{ calculateTotalPrice }}</span>
              </div>
            </el-card>

            <el-card style="margin-top: 20px;">
              <div slot="header">
                <span>联系信息</span>
              </div>
              <div class="info-row">
                <span class="label">姓名：</span>
                <span class="value">{{ reservationForm.name }}</span>
              </div>
              <div class="info-row">
                <span class="label">手机号码：</span>
                <span class="value">{{ reservationForm.phone }}</span>
              </div>
              <div class="info-row">
                <span class="label">服务地址：</span>
                <span class="value">{{ reservationForm.address }}</span>
              </div>
              <div v-if="reservationForm.notes" class="info-row">
                <span class="label">服务备注：</span>
                <span class="value">{{ reservationForm.notes }}</span>
              </div>
            </el-card>

            <div class="agreement" style="margin-top: 20px;">
              <el-checkbox v-model="reservationForm.agreement">我已阅读并同意<el-link type="primary">《服务条款》</el-link>和<el-link type="primary">《隐私政策》</el-link></el-checkbox>
            </div>

            <div class="confirm-actions" style="margin-top: 20px;">
              <el-button @click="activeStep = 1">上一步</el-button>
              <el-button type="primary" @click="confirmReservation" :disabled="!reservationForm.agreement">确认预约</el-button>
            </div>
          </div>
        </div>

        <!-- 步骤4：预约成功 -->
        <div v-if="activeStep === 3" class="step-content success-content">
          <div class="success-icon">
            <i class="el-icon-check"></i>
          </div>
          <h2>预约成功！</h2>
          <p>您的服务预约已提交成功，预约编号：{{ reservationNumber }}</p>
          <p>我们的客服将在2小时内与您联系确认详情</p>
          <div class="success-actions">
            <el-button type="primary" @click="goToHome">返回首页</el-button>
            <el-button @click="newReservation">再次预约</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "ServiceReservation",
  data() {
    return {
      activeStep: 0,
      reservationNumber: "",
      reservationForm: {
        serviceCategory: "",
        serviceType: "",
        date: "",
        time: "",
        duration: "",
        name: "",
        phone: "",
        address: "",
        notes: "",
        agreement: false
      },
      rules: {
        name: [
          { required: true, message: "请输入您的姓名", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入您的手机号码", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入服务地址", trigger: "blur" }
        ]
      },
      serviceCategories: [
        { value: "cleaning", label: "家居清洁" },
        { value: "maternity", label: "母婴护理" },
        { value: "elderly", label: "老人看护" },
        { value: "repair", label: "家居维修" }
      ],
      serviceTypes: {
        cleaning: [
          { 
            value: "basic_cleaning", 
            label: "基础家居保洁",
            description: "专业的日常家居清洁服务，让您的家居环境始终保持整洁舒适。",
            features: ["客厅清洁", "卧室整理", "厨房清洁", "卫生间消毒"],
            price: 100,
            unit: "起/次",
            needsDuration: true
          },
          { 
            value: "deep_cleaning", 
            label: "深度家居保洁",
            description: "针对久未清洁或特殊场合的深度清洁服务，恢复家居环境的整洁与舒适。",
            features: ["家具深度除尘", "地板深度清洁", "厨房油污清除", "卫浴设备除垢"],
            price: 300,
            unit: "起/次",
            needsDuration: true
          }
        ],
        maternity: [
          { 
            value: "maternity_nurse", 
            label: "专业月嫂服务",
            description: "资深月嫂团队，为新妈妈和宝宝提供专业的月子护理服务。",
            features: ["产妇护理", "新生儿护理", "月子餐制作", "产后恢复指导"],
            price: 8000,
            unit: "起/月",
            needsDuration: false
          },
          { 
            value: "nanny", 
            label: "育儿嫂服务",
            description: "专业的育儿嫂服务，为0-3岁婴幼儿提供科学的照料和早教指导。",
            features: ["日常照料", "辅食制作", "早教启蒙", "生活习惯培养"],
            price: 6000,
            unit: "起/月",
            needsDuration: false
          }
        ],
        elderly: [
          { 
            value: "elderly_care", 
            label: "老人日常陪护",
            description: "为老年人提供细致、耐心的生活照料和情感陪伴服务。",
            features: ["生活起居照料", "情感陪伴", "户外活动陪同", "服药提醒"],
            price: 4000,
            unit: "起/月",
            needsDuration: false
          },
          { 
            value: "patient_care", 
            label: "病患陪护",
            description: "为行动不便或有特殊需求的老人提供专业的陪护服务。",
            features: ["专业护理", "日常照料", "康复训练辅助", "心理疏导"],
            price: 200,
            unit: "起/天",
            needsDuration: false
          }
        ],
        repair: [
          { 
            value: "appliance_repair", 
            label: "小型家电维修",
            description: "提供小型家电维修服务，解决家庭日常用电问题。",
            features: ["电器故障排查", "简单零件更换", "使用指导", "维护保养建议"],
            price: 100,
            unit: "起/次",
            needsDuration: false
          },
          { 
            value: "plumbing_electrical", 
            label: "水电维修",
            description: "解决家庭水电问题，保障家居生活安全。",
            features: ["水管维修", "电路检修", "水龙头更换", "插座更换"],
            price: 150,
            unit: "起/次",
            needsDuration: false
          }
        ]
      }
    };
  },
  computed: {
    filteredServiceTypes() {
      if (!this.reservationForm.serviceCategory) {
        return [];
      }
      return this.serviceTypes[this.reservationForm.serviceCategory] || [];
    },
    selectedService() {
      if (!this.reservationForm.serviceCategory || !this.reservationForm.serviceType) {
        return null;
      }
      const serviceTypes = this.serviceTypes[this.reservationForm.serviceCategory] || [];
      return serviceTypes.find(type => type.value === this.reservationForm.serviceType);
    },
    needsDuration() {
      return this.selectedService && this.selectedService.needsDuration;
    },
    canProceedToStep1() {
      return (
        this.reservationForm.serviceCategory &&
        this.reservationForm.serviceType &&
        this.reservationForm.date &&
        this.reservationForm.time &&
        (!this.needsDuration || this.reservationForm.duration)
      );
    },
    getServiceCategoryLabel() {
      const category = this.serviceCategories.find(
        cat => cat.value === this.reservationForm.serviceCategory
      );
      return category ? category.label : "";
    },
    getServiceTypeLabel() {
      return this.selectedService ? this.selectedService.label : "";
    },
    calculateTotalPrice() {
      if (!this.selectedService) {
        return 0;
      }
      
      let price = this.selectedService.price;
      
      // 如果是按小时计费的服务，根据时长计算总价
      if (this.needsDuration && this.reservationForm.duration) {
        price = price * (parseInt(this.reservationForm.duration) / 2);
      }
      
      return price;
    }
  },
  methods: {
    disabledDate(date) {
      // 禁用今天之前的日期
      return date < new Date(new Date().setHours(0, 0, 0, 0));
    },
    formatDate(date) {
      if (!date) return "";
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    nextStep() {
      if (this.canProceedToStep1) {
        this.activeStep = 1;
      }
    },
    submitUserInfo() {
      this.$refs.userInfoForm.validate(valid => {
        if (valid) {
          this.activeStep = 2;
        }
      });
    },
    confirmReservation() {
      if (this.reservationForm.agreement) {
        // 这里可以添加提交预约信息到后端的代码
        // 模拟生成预约编号
        this.reservationNumber = "BS" + new Date().getTime().toString().slice(-8);
        this.activeStep = 3;
      }
    },
    goToHome() {
      this.$router.push("/company/index");
    },
    newReservation() {
      // 重置表单
      this.reservationForm = {
        serviceCategory: "",
        serviceType: "",
        date: "",
        time: "",
        duration: "",
        name: "",
        phone: "",
        address: "",
        notes: "",
        agreement: false
      };
      this.activeStep = 0;
    }
  },
  created() {
    // 检查是否有传递的服务参数
    if (this.$route.query.category && this.$route.query.type) {
      this.reservationForm.serviceCategory = this.$route.query.category;
      // 等待serviceCategory更新后再设置serviceType
      this.$nextTick(() => {
        // 从服务列表中找到对应ID的服务
        const service = this.filteredServiceTypes.find(
          item => item.value === this.$route.query.type.toString()
        );
        if (service) {
          this.reservationForm.serviceType = service.value;
        }
      });
    }
  }
};
</script>

<style scoped>
.reservation-container {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.reservation-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px 20px;
  background: linear-gradient(to right, #1890ff, #36cfc9);
  color: white;
  border-radius: 4px;
}

.reservation-header h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.reservation-card {
  margin-bottom: 30px;
}

.step-content {
  margin-top: 30px;
  padding: 0 20px;
}

.step-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 20px;
  color: #1890ff;
}

.selected-service {
  background-color: #f8f8f8;
  border-radius: 4px;
  padding: 20px;
  margin: 20px 0;
}

.service-info h3 {
  margin-top: 0;
  color: #1890ff;
}

.service-features {
  margin: 15px 0;
}

.feature-item {
  margin-bottom: 8px;
}

.feature-item i {
  color: #1890ff;
  margin-right: 5px;
}

.service-price {
  margin-top: 15px;
}

.price {
  font-size: 24px;
  color: #f56c6c;
  font-weight: bold;
}

.unit {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}

.confirmation-info {
  padding: 0 20px;
}

.info-row {
  display: flex;
  margin-bottom: 15px;
}

.info-row .label {
  width: 100px;
  color: #666;
}

.info-row .value {
  flex: 1;
  font-weight: 500;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.success-content {
  text-align: center;
  padding: 40px 20px;
}

.success-icon {
  font-size: 80px;
  color: #67c23a;
  margin-bottom: 20px;
}

.success-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #67c23a;
}

.success-content p {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.success-actions {
  margin-top: 30px;
}
</style> 